<script setup lang="ts">
import { ref, watch } from "vue";
import { useForm } from "./utils/form1";
import { formRules, formScoreRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import Motion from "@/views/login/utils/motion";

const { scoreFormInline, score0, score1, score2, score3 } = useForm();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    uid: "",
    name: "",
    starttime: "",
    endtime: "",
    times: 90,
    totalscore: 0,
    score: 0,
    del: 0,
    addtime: "",
    updatetime: "",
    description: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

//
const scoreFormRef = ref();
function getScoreRef() {
  return scoreFormInline.value;
}

defineExpose({ getRef, getScoreRef });

watch(scoreFormInline, () => {
  handleScoreFormChange();
});

function handleScoreFormChange() {
  newFormInline.value.totalscore =
    (scoreFormInline.value.type0 * 1 +
      scoreFormInline.value.type1 * 1 +
      scoreFormInline.value.type2 * 1 +
      scoreFormInline.value.type3 * 1) /
    1;
}
</script>

<template>
  <div class="flex justify-between">
    <div class="min-w-[500px] mr-2">
      <el-card>
        <template #header>
          <div class="font-medium">试卷信息</div>
        </template>
        <el-form
          ref="ruleFormRef"
          :model="newFormInline"
          :rules="formRules"
          label-width="82px"
        >
          <Motion>
            <el-form-item label="试卷名称" prop="name">
              <el-input
                type="textarea"
                v-model="newFormInline.name"
                clearable
                placeholder="请输入试卷名称"
              />
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="时长" prop="times">
              <el-input
                v-model="newFormInline.times"
                clearable
                placeholder="请输入考试时长"
                :style="{ width: '220px' }"
              />(分钟)
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="总分" prop="totalscore">
              <el-input
                v-model="newFormInline.totalscore"
                readonly
                placeholder="请输入考试总分"
                :style="{ width: '220px' }"
              />
            </el-form-item>
          </Motion>
        </el-form>
      </el-card>
    </div>
    <div class="w-[calc(100%-500px)]">
      <el-card>
        <template #header>
          <div class="font-medium">随机题型分值设置</div>
        </template>
        <el-form
          ref="scoreFormRef"
          :model="scoreFormInline"
          :rules="formScoreRules"
          label-width="82px"
          @change="handleScoreFormChange"
        >
          <Motion>
            <el-form-item label="判断题" prop="type0">
              <el-input
                type="number"
                v-model="scoreFormInline.type0"
                placeholder="请输入判断题总分"
                :style="{ width: '220px' }"
              />（分值）分值说明：不能超过
              <el-tag type="danger" size="large"
                ><h1>{{ score0 }}</h1></el-tag
              >
              分
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="单选题" prop="type1">
              <el-input
                type="number"
                v-model="scoreFormInline.type1"
                placeholder="请输入单选题总分"
                :style="{ width: '220px' }"
              />（分值）分值说明：不能超过
              <el-tag type="danger" size="large"
                ><h1>{{ score1 }}</h1></el-tag
              >
              分
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="多选题" prop="type2">
              <el-input
                type="number"
                v-model="scoreFormInline.type2"
                placeholder="请输入多选题总分"
                :style="{ width: '220px' }"
              />（分值）分值说明：不能超过
              <el-tag type="danger" size="large"
                ><h1>{{ score2 }}</h1></el-tag
              >
              分
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="案例分析" prop="type3">
              <el-input
                type="number"
                v-model="scoreFormInline.type3"
                placeholder="请输入案例分析总分"
                :style="{ width: '220px' }"
              />（分值）分值说明：不能超过
              <el-tag type="danger" size="large"
                ><h1>{{ score3 }}</h1></el-tag
              >
              分
            </el-form-item>
          </Motion>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
